<template>
  <div class="px-[15px] pb-[50px] relative">
    <van-skeleton v-if="page === 1 && loading" title :row="10" />
    <template v-else>
      <van-pull-refresh v-if="personList.length > 0" v-model="refreshing" @refresh="onrefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :immediate-check="immediateCheck"
          finish-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="getPersonListMore"
          class="pb-2.5"
        >
          <List :personList="personList" :loading="loading" @operate="handleOperate" />
        </van-list>
      </van-pull-refresh>
      <van-empty v-else description="无数据" />
    </template>
    <van-popup v-model:show="showOperatePicker" position="bottom">
      <van-picker
        :columns="filterOperateList"
        value-key="label"
        @confirm="onOperateConfirm"
        @cancel="showOperatePicker = false"
      />
    </van-popup>
    <Accept :person="curPerson" @success="handleSuccessCb" />
    <Rejected :person="curPerson" @success="handleSuccessCb" />
    <Extend :person="curPerson" @success="handleSuccessCb" />
    <Household :person="curPerson" @success="handleSuccessCb" />
    <Relieve :person="curPerson" @success="handleSuccessCb" />
    <a
      class="fixed w-10 h-10 p-2 rounded-full bg-[rgba(46,124,255,.6)] bottom-1/3 right-[15px]"
      @click="showFilterPicker = true"
    >
      <img src="@/assets/filter.png" />
    </a>
    <van-popup
      v-model:show="showFilterPicker"
      position="right"
      :style="{ width: '80%', height: '100%' }"
      closeable
    >
      <div class="px-[5px] pt-12 h-screen">
        <van-form class="relative overflow-hidden h-full" @submit="onFilterConfirm">
          <div class="px-2.5 mb-5">
            <div
              class="filter-container flex-1 h-[52px] flex justify-between items-center bg-[#fff] rounded-lg mb-2.5"
            >
              <van-search v-model="keyword" class="w-full" placeholder="搜索关键词" />
            </div>
          </div>
          <van-field
            v-model="community_label"
            is-link
            readonly
            required
            name="community_label"
            clearable
            label="社区"
            placeholder="社区"
            input-align="right"
            @click="showCommunityPicker = true"
          />
          <van-popup v-model:show="showCommunityPicker" position="bottom">
            <van-search
              v-model="search"
              placeholder="请输入搜索关键词"
              @update:model-value="onSearch"
            />
            <van-picker
              ref="picker"
              :columns="communityList"
              value-key="label"
              @confirm="onCommunityConfirm"
              @cancel="showCommunityPicker = false"
            />
          </van-popup>
          <van-field
            v-model="mch_label"
            is-link
            readonly
            required
            name="mch_label"
            label="小区"
            placeholder="小区"
            input-align="right"
            @click="handleSelectChild"
          />
          <van-popup v-model:show="showCommunityChildPicker" position="bottom">
            <van-search
              v-model="search1"
              placeholder="请输入搜索关键词"
              @update:model-value="onSearch1"
            />
            <van-picker
              ref="picker1"
              :columns="communityChildList"
              value-key="label"
              @confirm="onCommunityChildConfirm"
              @cancel="showCommunityChildPicker = false"
            />
          </van-popup>
          <van-field
            v-model="isolate_reason_label"
            is-link
            readonly
            required
            name="isolate_reason"
            clearable
            label="人员类型"
            placeholder="人员类型"
            input-align="right"
            @click="showReasonPicker = true"
          />
          <van-popup v-model:show="showReasonPicker" position="bottom">
            <van-picker
              :columns="reasonList"
              value-key="name"
              @confirm="onReasonConfirm"
              @cancel="showReasonPicker = false"
            />
          </van-popup>
          <van-field
            v-model="confirm_label"
            is-link
            readonly
            name="confirm_status"
            label="确认状态"
            placeholder="确认状态"
            input-align="right"
            @click="showConfirmStatusPicker = true"
          />
          <van-popup v-model:show="showConfirmStatusPicker" position="bottom">
            <van-picker
              :columns="confirm_status_list"
              value-key="label"
              @confirm="onConfirmStatusConfirm"
              @cancel="showConfirmStatusPicker = false"
            />
          </van-popup>
          <van-field
            v-model="isolate_status_label"
            is-link
            readonly
            name="isolate_status"
            label="隔离状态"
            placeholder="隔离状态"
            input-align="right"
            @click="showIsolateStatusPicker = true"
          />
          <van-popup v-model:show="showIsolateStatusPicker" position="bottom">
            <van-picker
              :columns="isolate_status_list"
              value-key="label"
              @confirm="onIsolateStatusConfirm"
              @cancel="showIsolateStatusPicker = false"
            />
          </van-popup>
          <div class="flex justify-between p-5 absolute w-full bottom-8">
            <van-button round block @click="onFilterRest"> 重置 </van-button>
            <van-button
              round
              block
              type="primary"
              native-type="submit"
              :loading="loading"
              class="ml-5"
            >
              筛选
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import Community from '@/components/Community.vue'
  import List from './components/List.vue'
  import Accept from '@/components/dialog/Accept.vue'
  import Rejected from '@/components/dialog/Rejected.vue'
  import Extend from '@/components/dialog/Extend.vue'
  import Household from '@/components/dialog/Household.vue'
  import Relieve from '@/components/dialog/Relieve.vue'
  import { usePersonEffect } from './hooks/usePersonEffect'
  import { useGlobalEffect } from '@/hooks/useGlobalEffect'
  import { Toast } from 'vant'

  export default defineComponent({
    name: 'Person',
    components: {
      Community,
      Accept,
      List,
      Rejected,
      Extend,
      Household,
      Relieve
    },
    setup() {
      const immediateCheck = false
      const picker = ref();
      const picker1 = ref();
      const search = ref('')
      const search1 = ref('')

      const { getAllEnum, reasonList } = useGlobalEffect()

      getAllEnum()

      const handleSelectChild = () => {
        if (communityChildList.value.length === 0) return Toast.fail('请先选择社区')
        showCommunityChildPicker.value = true
      }

      const {

        loading,
        showOperatePicker,
        onOperateConfirm,
        getPersonList,
        keyword,
        mch_id,
        mch_label,
        community_id,
        community_label,
        confirm_status,
        confirm_label,
        isolate_status,
        isolate_status_label,
        isolate_reason,
        isolate_reason_label,
        showFilterPicker,
        onFilterConfirm,
        communityList,
        showCommunityPicker,
        onCommunityConfirm,
        communityChildList,
        showCommunityChildPicker,
        onCommunityChildConfirm,
        showReasonPicker,
        onReasonConfirm,
        isolate_status_list,
        showIsolateStatusPicker,
        onIsolateStatusConfirm,
        confirm_status_list,
        showConfirmStatusPicker,
        onConfirmStatusConfirm,
        onFilterRest,
        handleOperate,
        filterOperateList,
        curPerson,
        finished,
        refreshing,
        onrefresh,
        personList,
        page,
        getPersonListMore,
        handleSuccessCb
      } = usePersonEffect()

      getPersonList(true) // 获取列表
      const onSearch = (value: any) => {
        // 过滤结果
        let filter = communityList.filter((item) => {
          return item.label.indexOf(value) >= 0
        })
        picker.value.setColumnValues(0, filter)

      }

      const onSearch1 = (value: any) => {
        let filter = communityChildList.value.filter((item) => {
          return item.label.indexOf(value) >= 0
        })
        picker1.value.setColumnValues(0, filter)

      }
      return {
        picker,
        picker1,
        search,
        onSearch,
        search1,
        onSearch1,
        loading,
        filterOperateList,
        showOperatePicker,
        onOperateConfirm,
        getPersonList,
        keyword,
        mch_id,
        mch_label,
        community_id,
        community_label,
        confirm_status,
        confirm_label,
        isolate_status,
        isolate_status_label,
        isolate_reason,
        isolate_reason_label,
        personList,
        showFilterPicker,
        onFilterConfirm,
        handleSelectChild,
        communityList,
        showCommunityPicker,
        onCommunityConfirm,
        communityChildList,
        showCommunityChildPicker,
        onCommunityChildConfirm,
        showReasonPicker,
        onReasonConfirm,
        reasonList,
        isolate_status_list,
        showIsolateStatusPicker,
        onIsolateStatusConfirm,
        confirm_status_list,
        showConfirmStatusPicker,
        onConfirmStatusConfirm,
        onFilterRest,
        handleOperate,
        curPerson,
        finished,
        refreshing,
        onrefresh,
        immediateCheck,
        page,
        getPersonListMore,
        handleSuccessCb
      }
    }
  })
</script>
